

import { Component, Inject, forwardRef } from '@angular/core';
import { FormGroup, FormBuilder, AbstractControl, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private notify:any;
  private message:any;

  aa(event:any){
    console.log(event);
  }

  options1:any =[{
    value: 'zhinan',
    label: '指南',
    children: [{
      value: 'shejiyuanze',
      label: '设计原则',
      children: [{
        value: 'yizhi',
        label: '一致'
      }, {
        value: 'fankui',
        label: '反馈'
      }, {
        value: 'xiaolv',
        label: '效率'
      }, {
        value: 'kekong',
        label: '可控'
      }]
    }, {
      value: 'daohang',
      label: '导航',
      children: [{
        value: 'cexiangdaohang',
        label: '侧向导航'
      }, {
        value: 'dingbudaohang',
        label: '顶部导航'
      }]
    }]
  }, {
    value: 'zujian',
    label: '组件',
    children: [{
      value: 'basic',
      label: 'Basic',
      children: [{
        value: 'layout',
        label: 'Layout 布局'
      }, {
        value: 'color',
        label: 'Color 色彩'
      }, {
        value: 'typography',
        label: 'Typography 字体'
      }, {
        value: 'icon',
        label: 'Icon 图标'
      }, {
        value: 'button',
        label: 'Button 按钮'
      }]
    }, {
      value: 'form',
      label: 'Form',
      children: [{
        value: 'radio',
        label: 'Radio 单选框'
      }, {
        value: 'checkbox',
        label: 'Checkbox 多选框'
      }, {
        value: 'input',
        label: 'Input 输入框'
      }, {
        value: 'input-number',
        label: 'InputNumber 计数器'
      }, {
        value: 'select',
        label: 'Select 选择器'
      }, {
        value: 'cascader',
        label: 'Cascader 级联选择器'
      }, {
        value: 'switch',
        label: 'Switch 开关'
      }, {
        value: 'slider',
        label: 'Slider 滑块'
      }, {
        value: 'time-picker',
        label: 'TimePicker 时间选择器'
      }, {
        value: 'date-picker',
        label: 'DatePicker 日期选择器'
      }, {
        value: 'datetime-picker',
        label: 'DateTimePicker 日期时间选择器'
      }, {
        value: 'upload',
        label: 'Upload 上传'
      }, {
        value: 'rate',
        label: 'Rate 评分'
      }, {
        value: 'form',
        label: 'Form 表单'
      }]
    }, {
      value: 'data',
      label: 'Data',
      children: [{
        value: 'table',
        label: 'Table 表格'
      }, {
        value: 'tag',
        label: 'Tag 标签'
      }, {
        value: 'progress',
        label: 'Progress 进度条'
      }, {
        value: 'tree',
        label: 'Tree 树形控件'
      }, {
        value: 'pagination',
        label: 'Pagination 分页'
      }, {
        value: 'badge',
        label: 'Badge 标记'
      }]
    }, {
      value: 'notice',
      label: 'Notice',
      children: [{
        value: 'alert',
        label: 'Alert 警告'
      }, {
        value: 'loading',
        label: 'Loading 加载'
      }, {
        value: 'message',
        label: 'Message 消息提示'
      }, {
        value: 'message-box',
        label: 'MessageBox 弹框'
      }, {
        value: 'notification',
        label: 'Notification 通知'
      }]
    }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
        value: 'menu',
        label: 'NavMenu 导航菜单'
      }, {
        value: 'tabs',
        label: 'Tabs 标签页'
      }, {
        value: 'breadcrumb',
        label: 'Breadcrumb 面包屑'
      }, {
        value: 'dropdown',
        label: 'Dropdown 下拉菜单'
      }, {
        value: 'steps',
        label: 'Steps 步骤条'
      }]
    }, {
      value: 'others',
      label: 'Others',
      children: [{
        value: 'dialog',
        label: 'Dialog 对话框'
      }, {
        value: 'tooltip',
        label: 'Tooltip 文字提示'
      }, {
        value: 'popover',
        label: 'Popover 弹出框'
      }, {
        value: 'card',
        label: 'Card 卡片'
      }, {
        value: 'carousel',
        label: 'Carousel 走马灯'
      }, {
        value: 'collapse',
        label: 'Collapse 折叠面板'
      }]
    }]
  }, {
    value: 'ziyuan',
    label: '资源',
    children: [{
      value: 'axure',
      label: 'Axure Components'
    }, {
      value: 'sketch',
      label: 'Sketch Templates'
    }, {
      value: 'jiaohu',
      label: '组件交互文档'
    }]
  }];

  checked:boolean = true;
  checked2:boolean = true;
  checkList:Array<string> =  ['选中且禁用','复选框 A']

  //可选项目数量的限制
  cityOptions:Array<string> = ['上海', '北京', '广州', '深圳'];
  checkedCities:Array<string> = ['上海', '北京'];
  checkedCities1:Array<string> = ['上海', '北京'];

  centerDialogVisible:boolean = false;
  innerVisible:boolean=false;
  validateForm!: FormGroup

  options: any[] = [{
    value: 'mike',
    label: '加奶油',
    children: [{
      value: 'hot',
      label: '热奶油',
      children: [{
        value: 'more',
        label: '多糖',
      }, {
        value: 'half',
        label: '半糖',
      }, {
        value: 'few',
        label: '少糖',
      }],
    }],
  }, {
    value: 'cafe',
    label: '加咖啡',
    children: [{
      value: 'cubita',
      label: '古巴咖啡',
    }, {
      value: 'brazil',
      label: '巴西咖啡',
    }, {
      value: 'jamaica',
      label: '牙买加咖啡',
    }, {
      value: 'mamba',
      label: '曼巴咖啡',
    }],
  }]
  
  constructor(
    @Inject(forwardRef(() => FormBuilder)) private formBuilder: FormBuilder
  ) {
  }
  
  submit(): void {
    console.log(this.validateForm.value)
  }
  
  reset(): void {
    this.validateForm.reset()
  }
  
  ctrl(item: string): AbstractControl {
    return this.validateForm.controls[item]
  }
  
  statusCtrl(item: string): string {
    if (!this.validateForm.controls[item]) return '';
    const control: AbstractControl = this.validateForm.controls[item]
    return control.dirty && control.hasError('status') ? (control.errors as any).status : ''
  }
  
  messageCtrl(item: string): string {
    if (!this.validateForm.controls[item]) return '';
    const control: AbstractControl = this.validateForm.controls[item]
    return control.dirty && control.hasError('message') ? (control.errors as any).message : ''
  }
  
  ngOnInit(): void {
    this.validateForm = this.formBuilder.group({
      city: [ '', [this.cityValidator] ],
      express: [ '' ],
      invoice: [ '' ],
      discount: [ [] ],
      time: [ '', [this.timeValidator] ],
      num: [ 1 ],
      spec: [ '' ],
      date: [ '', [this.dateValidator] ],
    })
  }
  
  private timeValidator = (control: FormControl): any => {
    if (!control.value) {
      return { status: 'error', message: '必须选择配送时间' }
    }
    return { status: 'success' }
  }
  
  private dateValidator = (control: FormControl): any => {
    if (!control.value) {
      return { status: 'error', message: '必须选择配送日期' }
    }
    return { status: 'success' }
  }
  
  private cityValidator = (control: FormControl): any => {
    if (!control.value) {
      return { status: 'error', message: '必须填写城市名' }
    }
    if (!/[一-龥]/.test(control.value)) {
      return { status: 'error', message: '城市名必须是中文' }
    }
    return { status: 'success' }
  }
  

}